<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>myTitle</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-1.4.2.js"></script>
    <style>
        #taskId{
            width: 20px;
            height: 20px;
        }
        .btn{
            width: 50px;
            height: 40px;
            border-radius: 40px;
            background-color: lightseagreen;
            margin-left: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
开始时间：<input type="text" name="startDate" id="startDate">
<br>
结束时间：<input type="text" name="endDate" id="endDate">
<br>
您想查询第 <input type="text" name="taskId" id="taskId"> 次的任务
<br>
<button class="btn">查询</button>
</div>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    $(".btn").click(function () {
        console.log("点击发送ajax请求");
        $.ajax({
            url: "/attendance",
            data: {
                startDate: $("#startDate").val(),
                endDate: $("#endDate").val()
            },
            success: function (result) {
                 console.log(result.data.studentName);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                var arrayName = result.data.studentName;
                var arrayFormat = result.data.format;

                var option = {
                    title: {
                        text: '每个同学的出勤率'
                    },
                    tooltip: {},
                    legend: {
                        data: ['出勤率']
                    },
                    xAxis: {
                        data: arrayName
                    },
                    yAxis: {
                    },
                    series: [{
                        name: '学生的出勤率',
                        type: 'bar',
                        data:[0.98,0.99,0.88,0.65,0.4]
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        });
    });
</script>
</body>

</html>